<template>
	<div class="header-box">
		<!-- <WxOpenApp  v-show="$store.state.clearDom[0].open"  /> -->
		<div class="wrap-content" :class="marginTopClass">
			<div v-show="$store.state.clearDom[0].open" class="header-left">
			<p class="top-word" v-if="topWord.length"  @click="clickHeader('topWord')">{{topWord}}
				<Iconfont iconClass="iconfont icondaosanjiaoshixin" />
			</p>
			<!-- <div class="live-info-box">
				<img :src="roomInfo.roomInfo.userAnchor.headImg">
				<p class="live-name">{{roomInfo.roomInfo.userAnchor.nickname}}</p>
				<div class="colltect-live" @click="clickHeader('collect')" :class="[$store.state.isCollect?'colltect-live-gray':'colltect-live-red']">
					{{$store.state.isCollect?'已收藏':'收藏'}}
				</div>
			</div> -->			
			<div class="live-info-box">
				<img :src="roomInfo.roomInfo.userAnchor.headImg">
				<p class="live-name">{{roomInfo.roomInfo.userAnchor.nickname}}</p>
				<div class="colltect-live" @click="clickHeader('attention')" :class="[isAttention?'colltect-live-gray':'colltect-live-red']">
					{{isAttention?'已关注':'关注'}}
				</div>
			</div>
			<div v-show="$store.state.clearDom[0].open" class="live-person">
					{{roomNum | filterViewNum(1)}} 人次观看
			</div>
			<div class="header-left-top-box">				
				<div class="invite-box" v-if="haveSummary" @click="clickHeader('meetingSummary')">
					<img src="../../../assets/images/meetingSummary.png" />
					<p>会议纪要</p>
				</div>
				<div class="scan-box" v-if="haveMaterial" @click="clickHeader('meetingMaterial')">
					<img src="../../../assets/images/meetingMaterial.png" />
					<p>会议材料</p>
				</div>
			</div>
			<div class="header-left-middle-box">				
				<div class="invite-box" @click="clickHeader('inviteBtn')" v-if="isInviteBtn">
					<img src="../../../assets/images/paperPlane_v20220121.png" />
					<p>{{inviteTitle}}</p>
				</div>
				<div class="scan-box" @click="clickHeader('scanBtn')" v-if="isRewardBtn">
					<img src="../../../assets/images/paperPlane_v20220121.png" />
					<p>扫码</p>
				</div>
			</div>
			<div class="header-left-bottom-box">
				<div class="redPacket-box" v-if="isRedPacketBtn"  @click="clickHeader('redPacket')">
					<img src="../../../assets/images/choujiang/red-packet.png">
				</div>
				<div class="prize-box" v-if="islotteryIcon" @click="clickHeader('lotteryBtn')">
					<img src="../../../assets/images/choujiang/lottery.gif" />
				</div>
			</div>
		</div>
		<div class="header-right">
			<div class="header-right-box">
				<div class="float-video"  @click="clickHeader('floatVideo')"  v-if="isComputedFloatVideoBtn" v-show="$store.state.clearDom[0].open"   >
				
				</div>
				<div class="invite-btn" @click="clickHeader('inviteCardBtn')" v-show="$store.state.clearDom[0].open" v-if="isInvitaCard">
					
				</div>				
				<div :class="['close',{'clear-other-close':!$store.state.clearDom[0].open}]" v-if="isShowClose" @click="clickHeader('closeLiveBtn')">
					<!-- <van-icon name="cross" size="1.2rem" color="#FFFFFF" /> -->
				</div>
			</div>
			<div class="more-live-btn" v-if="isLiveMore && $store.state.clearDom[0].open" @click="clickHeader('liveMore')">
				<i></i>
				<span>更多直播</span>
				<i></i>
			</div>
			<!-- 右上活动组件@click.native='clickActivity("rightTop")' :dataArray='activityArray[2]' -->
			<ActiveRightTop :dataArray='rightTopDataActivity' v-if="isActivityRightTopShow && $store.state.clearDom[0].open"
				@click.native="clickHeader('activeRightTop')" />
		</div>
		</div>
	</div>
</template>

<script>
	import { CountUp } from 'countup.js'; // 数字翻滚效果
	import { getIsAttentionFun, cancelFollowSpecialColumn, followSpecialColumn, getFollowState } from '@/util/api.js'
	import ActiveRightTop from '@/components/activeCom/activeRightTop';
	import wx from 'weixin-js-sdk'
	//import WxOpenApp from '@/components/zxjt/wxOpenApp';
	export default {
		props: {
			roomInfo: Object,
			roomNum: String, //房间人数
			dataArrayRightTop: Object,
			isActivityRightTop: Boolean,
			isLiveMore:Boolean,
		},
		components: {
			ActiveRightTop,
			//WxOpenApp,
		},
		watch: {
			dataArrayRightTop() {
				this.rightTopDataActivity = this.dataArrayRightTop;
			},
			isActivityRightTop(newValue, oldValue) {
				if (newValue) {
					this.isActivityRightTopShow = this.isActivityRightTop;
				}
			},
		},
		computed:{
			isComputedFloatVideoBtn(){
                return  this.$store.state.videoIsPlay && this.$store.state.appVersionBoolean && window.terminal.isZxjtApp
			},
			isTencentLive() {
				return this.roomInfo.roomInfo.partnerType == 12
			},
			haveSummary() {
				return this.roomInfo.roomInfo?.roomExt2?.tcSummaryList && this.isTencentLive
			},
			haveMaterial() {
				return this.roomInfo.roomInfo?.roomExt2?.documentInfoList && this.isTencentLive
			}
		},
		filters: {
			filterViewNum(num, fixed) {
				if(!num) {
					return '0';
				} else {
					if(parseInt(num) < 10000) {
						return parseInt(num);
					} else {
						return(parseInt(num) / 10000).toFixed(fixed) + "w";
					}
				}
			}
		},
		data() {
			return {
				topWord: '',
				rightTopDataActivity: [],
				isActivityRightTopShow: false,
				isRedPacketBtn: false,
				islotteryIcon: false,
				isInviteBtn:false,
				isRewardBtn:false,
				inviteTitle:'',
				roomId: this.$route.params.roomid,
				isAttention:false,
				isInvitaCard:false,//邀请卡
				marginTopClass:'',
				isShowClose:true,
			}
		},
	    async created() {
			this.getcheckAttention();
			let {tables,marketQR,redPacketSwitch: {open},roomInfo: {topWord,}} = this.roomInfo;
			const source = sessionStorage.getItem('source')
			const plat = await fun.initSourcePlat()
			if(source === 'hly_mini' && plat === 'mini'){
                this.isShowClose = false;
			}
			this.isRedPacketBtn = open == '1' ? true : false; //红包开关
			this.topWord = fun.wordlimit(topWord, 14);
			let activityShowUrl = 'lotto/activityShow?roomId=' + this.roomId;
			fun.requestAxios('get', activityShowUrl, (res) => {
				if (res.data.code == "000000") {
					if (res.data.data.showLotto) {
						this.islotteryIcon = true; //抽奖开关
					}
				} else {
					console.log('接口返回error url:', url)
				}
			})
			//邀请榜按钮
			if (tables.find(i => i.type == 4)) {
				if( this.$channel !== 'zxjt' ){//zxjt 去除邀请榜单功能(横屏不动)
					this.isInviteBtn = true //显示分享榜 按钮
			        this.inviteTitle = tables[tables.findIndex(m => m.type == 4)].title;
				}			      
			}
			//邀请卡
			if (tables.length) {
				for (let ele of tables) {
					if (ele.type == '4' && ele.invitaCard) {
						if(this.$channel == 'zxjt'){
                            if(window.terminal.isZxjtApp){
								this.isInvitaCard = true;
							}
						}else{
							this.isInvitaCard = true;
						}						
					}
				}
			}
			//打赏
			if (marketQR) {
			  if (marketQR.open == '1') { //打开
			    this.rewardInfo =  marketQR;
			    this.isRewardBtn = true;
			  }
			}
			const  { appVersionBoolean } =  this.$store.state;
			if(appVersionBoolean && window.terminal.isZxjtApp){
				this.marginTopClass = 'margin-top-100px'
			}			
		},
		methods: {
			async getcheckAttention(){// 查询是否关注
				const { roomInfo: { anchor } } = this.roomInfo;
				const liveStation = this.$route.query.liveStation === '1'; // 是否来自直播小站
				if (liveStation) {
					try {
						const res = await getFollowState(anchor, 6);
						this.isAttention = res.data.data;
					} catch (error) {
						throw new Error(error)
					}
				} else {
					const isattention = await getIsAttentionFun(anchor);
					this.isAttention=isattention.data.data;
				}
			},
			clickHeader(clickType) {
				const {roomInfo:{title, anchor, roomId } } = this.roomInfo;
				switch (clickType) {
					case 'floatVideo':					
						$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
							page_name: '直播详情页',
							user_nickname: this.$store.state.userInfo.nickname,
							live_room_id: roomId,
							live_room_name: title,
							live_room_status: '直播中',
							live_room_creator: anchor,
							function_name: '唤起悬浮窗',
						});
						fun.floatSendData({}, '0');
						break;
					case 'inviteCardBtn':
					     $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
							page_name: '直播详情页',
							user_nickname: this.$store.state.userInfo.nickname,
							live_room_id: roomId,
							live_room_name: title,
							live_room_status: '直播中',
							live_room_creator: anchor,
							function_name: '邀请',
						});
						fun.shareDotNumFun({ ...this.roomInfo.roomInfo, fromTypeLiveBack: 'live' });
						this.$emit("formChildMsg", {
							type: "shareLive",
							data: 'ruan'
						});
						break;
					case 'lotteryBtn':
					case 'inviteBtn':
					case 'liveMore':
					case 'topWord':
						this.$emit("formChildMsg", {
							type: clickType,
							data: 'ruan'
						});
						break;
					case 'redPacket':
						if (this.$store.state.isYk) { //游客
							fun.ykDisposeFun();
							return
						}
						this.getPostRedList();
						break;
					case 'scanBtn':
						this.$emit("formChildMsg", {
							type: clickType,
							data: this.roomInfo.marketQR
						});
						break;
					case 'closeLiveBtn':
						this.closeBtn()
						break;
					case 'collect':
						if (this.$store.state.isYk) { //游客
							fun.ykDisposeFun();
							return
						}
						if (this.$store.state.isCollect) {
							fun.setLiveCollectFun(this.roomId, '0');
						} else {
							fun.setLiveCollectFun(this.roomId, '1');
						}
						break;
					case 'attention':
						if (this.$store.state.isYk) { //游客
							fun.ykDisposeFun();
							return
						}
						// 是否来自直播小站
						this.$route.query.liveStation === '1' ? this.liveStationAttention() : this.isAttention=fun.LiveAttentionFun(this.isAttention,this.roomInfo.roomInfo.anchor);
						break;
					case 'activeRightTop':
						this.$emit("formChildMsg", {
							type: "clickActiveRightTop",
							data: 'ruan'
						});
						break;
					case 'meetingSummary'://点击会议纪要弹框
						this.$emit("formChildMsg", {
							type: "meetingSummary",
							data: 'ruan'
						});
						break;
					case 'meetingMaterial'://点击会议材料弹框
						this.$emit("formChildMsg", {
							type: "meetingMaterial",
							data: 'ruan'
						});
						break;
					default:
						break;
				}
			},
			async liveStationAttention(){ // 直播小站关注
				const { roomInfo: { userAnchor: { anchorAcct } } } = this.roomInfo;
        if (this.isAttention) {
          try {
            const res = await cancelFollowSpecialColumn(anchorAcct, 6)
            const { code, data, msg } = res.data;
            if (code === '000000') {
              this.isAttention = false;
            } else {
              fun.toastMessage(msg);
            }
          } catch (error) {
            throw new Error(error);
          }
        } else {
          try {
            const res = await followSpecialColumn(anchorAcct, 6);
            const { code, data, msg } = res.data;
            if (code === '000000') {
              this.isAttention = true
            } else {
              fun.toastMessage(msg);
            }
          } catch (error) {
            throw new Error(error);
          }
        }
      },
			getPostRedList() {
				let params = {
					'qid': Math.random(),
					'roomId': this.roomId
				}
				this.$http.post('/packet/room_packet_list', this.$qs.stringify(params)).then( //点击商品统计
					res => {
						if (res.data.code == "000000") {
							if (res.data.data) { //防止null
								if (res.data.data.length) {
									this.$emit("formChildMsg", {
										type: "historyRedPcaketListArray",
										data: res.data.data
									});
								} else {
									fun.toastMessage('红包马上开始，不要离开哦...')
								}
							} else {
								fun.toastMessage('红包马上开始，不要离开哦...')
							}

						} else {
							console.log("历史红包接口错误")
			  	}
					},
					err => {
						console.log("历史红包接口错误")
					}
				)
			},
		closeBtn() {
			fun.liveBackFun();
			// if (this.$channel == 'zxjtqh' || this.$channel == 'zxjt') {
			// 	if (window.history.length <= 1) {//判断路由是否没有上级 如果没有强制跳转到首页
			// 		this.$router.replace({
			// 			path: `/${this.$channel}/home`
			// 		})
			// 	} else {
			// 		this.$router.go(-1)
			// 	}
			// } else {
			// 	this.$router.replace({
			// 		path: `/${this.$channel}/home`
			// 	})
			// }
			this.$store.dispatch("showSendMask", false);
			this.$store.dispatch("showGiftPanelFlag", false);
		},
		}
	}
</script>

<style scoped="scoped" lang="less">
	.header-box {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1005;		
		.wrap-content{
			width: 100vw;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			color: white;
			margin-top: 20px;
			// background: darkmagenta;
			&.margin-top-100px{
				margin-top: 100px;
			}
			.header-left {
				font-weight: 500;
				font-size: 30px;
				margin-left: 22px;
				// background: darkgray;
				line-height: 56px;
				display: flex;
				flex-direction: column;
				

			.top-word {
				// background: darkgoldenrod;
				margin-bottom: 27px;
			}

			.live-info-box {
				width: fit-content;
				padding: 5px 13px 5px 7px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 50px;
				line-height: 50px;
				// background: darkgoldenrod;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 39px;
				font-size: 24px;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 15px;

				.live-name {
					margin: 0 12px 0;
				}

				.colltect-live {
					padding: 5px 10px;
					border-radius: 23px;
					line-height: 25px;
					font-size: 22px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: white;
				}
                .colltect-live-red {
                	background: linear-gradient(223deg, #FF3088 0%, #FE4858 100%);
                }
				.colltect-live-gray {
					background: #999999;
				}
				img {
					width: 40px;
					height: 40px;
					// background: darkgreen;
					border-radius: 50%;
				}
			}
			.live-person {
				padding: 5px 15px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40px;
				line-height: 40px;
				background: rgba(0,0,0,0.3);
				border-radius: 26px;
				width: fit-content;
				font-size: 22px;
				margin-bottom: 15px;
			}
			.header-left-top-box {
				display: flex;
				margin-bottom: 15px;

				.invite-box,
				.scan-box {
					width: fit-content;
					height: 40px;
					line-height: 40px;
					padding: 5px 15px 5px 10px;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 26px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20px;
					font-size: 22px;

					img {
						width: 24px;
						height: 24px;
					}

					p {
						font-size: 24px;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 16px;
					}
				}
			}
			.header-left-middle-box {
				display: flex;
				margin-bottom: 15px;

				.invite-box,
				.scan-box {
					width: fit-content;
					height: 40px;
					line-height: 40px;
					padding: 5px 15px 5px 10px;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 26px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20px;
					font-size: 22px;

					img {
						width: 24px;
						height: 24px;
					}

					p {
						font-size: 24px;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 16px;
					}
				}
			}

			.header-left-bottom-box {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.redPacket-box {
					img {
						width: 64px;
						height: 64px;
						margin-right: 15px;
					}
				}

				.prize-box {
					img {
						width: 64px;
						height: 64px;

					}
				}
			}
		}

		.header-right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			font-size: 22px;

			.header-right-box {
				display: flex;
				margin-bottom: 20px;
				>div{
					width: 60px;
					height: 60px;
					margin-left: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.float-video{
					background: url("../../../assets/images/zxjt/float-video.png") no-repeat center center;
					background-size: 38px;
				}
				.invite-btn{
					background: url(../../../assets/images/zxjt/share-zxjt.png) no-repeat center center;
					background-size: 38px;
				}
				.close {
					background: url(../../../assets/images/zxjt/header-close.png) no-repeat center center;
					background-size: 38px;
				}
				.clear-other-close{
					position: absolute;
					right: 0px;
				}
			}



			
			.more-live-btn {
				max-width: 190px;
				height: 40px;
				padding: 0px 10px 0px 17px;
				background:rgba(0, 0, 0, 0.3);
				border-top-left-radius: 20px;
				border-bottom-left-radius: 20px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				z-index: 13;
				margin: 0 0 25px;

				i:first-of-type {
					height: 24px;
					width: 24px;
					background: url(../../../assets/images/zxyh/live_v20220121.png) no-repeat;
					background-size: 24px 24px;
				}

				span {
					font-size: 22px;
					color: #FFFFFF;
					line-height: 22px;
					margin: 0 8px;
				}

				i:last-of-type {
					height: 14px;
					width: 14px;
					margin-bottom: 2px;
					background: url('../../../assets/images/zxyh/enter_btn.png') no-repeat;
					background-size: 14px 14px;
				}
			}
		}
		}
		
	}
</style>
